<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: 'white',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">打卡详情</view>
    </view>
    <!-- 主体 -->
    <view class="box" :style="{ marginTop: statusBarHeight + 'px' }">
      <view class="top">
        <view class="ranking">
          <view class="ranking_item" @click="goPage">
            <image
              src="@/static/images/icon_xly_paihangbang.png"
              mode=""
            ></image>
            <view class="ranking_item_text">排行榜</view>
          </view>
        </view>
        <view class="top_text">{{ detail.title }}</view>
        <view class="top_num">{{ detail.total_people }}人参与</view>
      </view>
    </view>
    <view class="title">打卡记录</view>
    <!-- <view class="main"> -->
    <scroll-view
      class="main"
      :style="{
        height: scrollHeihgt + 'px',
      }"
      :scroll-y="true"
      @scroll="scroll"
      @scrolltolower="scrolltolower"
    >
      <view class="main_item" v-for="(item, index) in dakaList" :key="index">
        <view class="main_item_top" v-if="item.user">
          <view class="main_item_top_img">
            <image :src="item.user.avatar_url" mode=""></image>
          </view>
          <view class="main_item_top_view">
            <view class="main_item_top_view_name">{{
              item.user.nick_name
            }}</view>
            <view class="main_item_top_view_time">{{ item.create_time }}</view>
          </view>
        </view>
        <view class="main_item_text" v-html="item.content"> </view>
        <view class="main_item_img" v-if="item.file && item.file.length">
          <!-- 图片 -->
          <view
            class="jiugong"
            :class="
              item.file.length == 1
                ? 'jiugong1'
                : item.file.length == 4
                ? 'jiugong4'
                : ''
            "
          >
            <view
              class="jiugong_img"
              v-for="(itemValue, index) in item.file"
              :key="index"
              @click.stop="goPreview(itemValue, item.file,index)"
            >
              <!-- 图片展示图 -->
              <image
                :src="itemValue.url"
                v-if="itemValue.file_type == 10"
              ></image>
              <!-- 视频展示图 -->
              <image
                :src="itemValue.url_img"
                v-if="itemValue.file_type == 30"
              ></image>
              <!-- 遮罩层 -->
              <view class="jiugong_img_mask" v-if="itemValue.file_type == 30">
                <view class="video_cover_play">
                  <image src="@/static/images/icon_dtym_bofang.png"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- </view> -->

    <view style="height: 100rpx" v-if="!detail.is_daka"></view>
    <view class="btn_box" v-if="!detail.is_daka">
      <view class="btn" @click="goClock"> 打卡 </view>
    </view>
	<floatingBall></floatingBall>
  </view>
</template>
  
  <script>
import collect from "@/components/collect.vue"; // 收藏、
import progressBar from "@/pages/components/progress_bar.vue"; //录音
export default {
  components: {
    collect,
    progressBar,
  },

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      scrollHeihgt: 100,
      detail: {},
      dakaList: [],
      id: "",
      page: 1,
      last_page: 0,
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  created() {
    // const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    // this.statusBarHeight = statusBarHeight.statusBarHeight;
    // this.$nextTick(() => {
    //   uni
    //     .createSelectorQuery()
    //     .select(".head")
    //     .boundingClientRect((data) => {
    //       this.height = data.height;
    //     })
    //     .exec();
    // });
    this.getDetail();
    this.getDakaList();
  },
  methods: {
    getHieght() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      const windowHeihgt = statusBarHeight.windowHeight;
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".head").fields({
          size: true,
        });
        query.select(".top").fields({
          size: true,
        });
        query.select(".title").fields({
          size: true,
        });

        query.exec((data) => {
          let sum = 0;
          data.forEach((item) => {
            sum += item.height;
          });
          this.height = data[0].height;
          this.scrollHeihgt = windowHeihgt - sum - this.statusBarHeight;
          console.log(data, "各种高度");
          console.log(this.scrollHeihgt, "滚动高度");
        });
      });
    },
    scroll() {},
    scrolltolower() {
      if (this.page == this.last_page || this.last_page == 0) {
      } else {
        this.page++;
        this.getDakaList();
      }
      // console.log("触发");
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goPreview(item, file,index) {
      console.log(item);
      if (item.file_type == 30) {
        console.log(111111, item);
        uni.navigateTo({
          url: `/components/preview?type=false&vimg=${item.url}`,
        });
      } else if (item.file_type == 10) {
        // console.log(222222222, item);
        // uni.navigateTo({
        //   url: `/components/preview?type=true&img=${item.url}`,
        // });
        let str = [];
        for (let i = 0; i < file.length; i++) {
          if (file[i].file_type == 10) {
            str.push(file[i].url);
          }
        }

        uni.previewImage({
          urls: str,
          current:item.url,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {
              console.log(
                "选中了第" +
                  (data.tapIndex + 1) +
                  "个按钮,第" +
                  (data.index + 1) +
                  "张图片"
              );
            },
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      }
    },
    // 训练营详情
    getDetail() {
      this.$http
        .xunlianyingDetail({ id: this.id })
        .then((res) => {
          this.detail = res.data.detail;
          console.log(this.detail, "训练营详情");
          this.getHieght();
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 打卡记录
    getDakaList() {
      this.$http
        .xunlianyingDakaList({ association_id: this.id, page: this.page })
        .then((res) => {
          this.dakaList = this.dakaList.concat(res.data.data);
          // if(res.data.data.current_page == 1){
          //   this.dakaList = res.data.data;
          // } else {
          //   this.dakaList.data = this.dakaList.data.concat(res.data.data.data)
          // }
          this.last_page = res.data.last_page;
          console.log(this.dakaList, "打卡记录");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 跳排行榜页面
    goPage() {
      uni.navigateTo({
        url: `/pages/training/ranking?detail=${JSON.stringify(this.detail)}`,
      });
    },
    // 跳打卡表单
    goClock() {
      uni.navigateTo({
        url: `/pages/training/clock?detail=${JSON.stringify(this.detail)}`,
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  box-sizing: border-box;
  position: fixed;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 0 30rpx;
  position: relative;
  .top {
    width: 100%;
    height: 345rpx;
    border-radius: 16rpx;
    background-image: url("@/static/images/pic_wddc_neirong_tu.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 32rpx;
    box-sizing: border-box;
    .ranking {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .ranking_item {
        width: 166rpx;
        height: 56rpx;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 30rpx;
          height: 30rpx;
        }
        .ranking_item_text {
          font-size: 26rpx;
          color: #ffffff;
          margin-left: 10rpx;
        }
      }
    }
    .top_text {
      font-size: 36rpx;
      color: #ffffff;
      margin-top: 133rpx;
      text-overflow: ellipsis;

      overflow: hidden;

      white-space: nowrap;
    }
    .top_num {
      font-size: 28rpx;
      color: #888888;
      margin-top: 16rpx;
    }
  }
}
.title {
  font-size: 32rpx;
  color: #444444;
  padding: 32rpx 30rpx;
}
.main {
  border-top: 1rpx solid #eeeeee;
  padding: 0 30rpx 150rpx 30rpx;
  box-sizing: border-box;
  .main_item {
    border-bottom: 1rpx solid #eeeeee;
    padding-top: 30rpx;
    .main_item_top {
      display: flex;
      align-items: center;
      .main_item_top_img {
        width: 100rpx;
        height: 100rpx;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
        }
      }
      .main_item_top_view {
        margin-left: 24rpx;
        .main_item_top_view_name {
          font-size: 32rpx;
          color: #888888;
        }
        .main_item_top_view_time {
          font-size: 24rpx;
          color: #888888;
        }
      }
    }
    .main_item_text {
      font-size: 28rpx;
      color: #444444;
      margin-top: 24rpx;
    }
    .main_item_img {
      margin-bottom: 32rpx;
      .jiugong {
        margin-top: 32rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .jiugong_img {
          width: 222rpx;
          height: 222rpx;
          margin-right: 12rpx;
          margin-bottom: 12rpx;
          position: relative;
          .jiugong_img_mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(1, 1, 1, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            .video_cover_play {
              width: 80rpx;
              height: 80rpx;
              image {
                width: 80rpx;
                height: 80rpx;
              }
            }
          }
        }
        image {
          width: 222rpx;
          height: 222rpx;
        }
        .jiugong_img:nth-child(3n) {
          margin-right: 0;
        }
      }
      .jiugong1 {
        width: 222rpx;
        height: 222rpx;
        image {
          width: 222rpx;
          height: 222rpx;
        }
      }
      .jiugong4 {
        width: 460rpx;
        .jiugong_img:nth-child(3n) {
          margin-right: 12rpx;
        }
        .jiugong_img:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
}
.btn_box {
  width: 100%;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 16rpx 30rpx;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  .btn {
    height: 96rpx;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>